<template>
  <g>
    <svg
      x="0"
      y="0"
      t="1732525820388"
      class="icon"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1388"
      :width="bgwidth"
      :height="bgheight"
    >
      <rect
        x="0"
        y="0"
        rx="5"
        ry="6"
        :width="bgwidth"
        :height="bgheight"
        :style="'fill: ' + bgFill + ';'"
      />
    </svg>
    <text
      x="2"
      :y="textY"
      :font-family="props.fontFamily"
      :font-size="props.fontSize"
      :fill="props.fill"
    >
      {{ props.text }}
    </text>
  </g>
</template>
<script setup lang="ts">
  const props = defineProps({
    fontFamily: {
      type: String,
      default: ''
    },
    bgwidth: {
      type: Number,
      default: 10
    },
    bgheight: {
      type: Number,
      default: 10
    },
    fontSize: {
      type: Number,
      default: 10
    },
    textY: {
      type: Number,
      default: 0
    },
    text: {
      type: String,
      default: ''
    },
    bgFill: {
      type: String,
      default: ''
    },
    fill: {
      type: String,
      default: ''
    }
  });
</script>
